<!-- 全部课程 页面 -->

<template>
	<focus-body 
		mode="auto" 
		bg="#FFFFFF"
	>
		<!-- 顶部分类栏占位容器 -->
		<focus-box 
			width="750" 
			height="100"
		>
			<!-- 内部悬浮定位容器 -->
			<focus-box 
				top="0" 
				left="0" 
				mode="col" 
				bg="white"
				index="3x" 
				width="750" 
				height="100" 
				justify="end" 
				align="center"
				position="fixed" 
			>
				
				<!-- 循环分类按钮容器 -->
				<focus-box 
					width="750" 
					height="96" 
					mode="row" 
					justify="center" 
					align="center"
				>
					<!-- 循环分类数据 -->
					<block  
						v-for="(item,index) in fenLei.list" 
						:key="item.xunk" 
					>
						<!-- 单个按钮容器 -->
						<focus-box 
							mode="row" 
							height="96" 
							width="250" 
							align="center"
							justify="center" 
							position="relative" 
							@click="fenLeiBtnClick(index)"
						>
							<!-- 按钮文字 -->
							<focus-text
								:text="item.value"
								:size="index==fenLei.index ? 32 : 30"
								:weight="index==fenLei.index ? 'bold' : 'normal'"
								:color="index==fenLei.index ? 'primary' : 'content'"
							></focus-text>
							<!-- 底部选中线条 -->
							<focus-box 
								v-if="index==fenLei.index"
								width="34" 
								height="6" 
								radius="3" 
								left="108" 
								bottom="10"
								bg="primary"
								position="absolute" 
							></focus-box>
						</focus-box>
					</block>
				</focus-box>
				<!-- 底部间隔线条 -->
				<focus-line 
					direction="row" 
					length="750" 
					color="info-light"
				></focus-line>
				
			</focus-box>
		</focus-box>
		
		<view class="classSon">
			<text 
				class="classSonItem" 
				:style="type==='all'?'background:#eaf1ff;color:#4a87fd':''"
				@click="classSon('all')"
			>
				全部
			</text>
			<text 
				class="classSonItem" 
				:style="type==='must'?'background:#eaf1ff;color:#4a87fd':''"
				@click="classSon('must')"
			>
				必修
			</text>
			<text 
				class="classSonItem" 
				:style="type==='choose'?'background:#eaf1ff;color:#4a87fd':''"
				@click="classSon('choose')"
			>
				选修
			</text>
			
		</view>
		<view 
			v-if="!(courseList.length)" 
			style="text-align: center;padding-top: 100rpx;"
		>
			<u-empty 
				text="课程更新中..." 
				mode="list"
			/>
		</view>
		<!-- 循环课程列表 -->
		<view 
		    :key="item.key"
			v-for="item in courseList" 
			class="itemBox" 
			@click='itemClick(item.courseId,item.jieId)' 
		>
			<view class="item">
				<u-image 
					:src="item.img" 
					width="210rpx" 
					height="126rpx" 
					border-radius='15rpx'
				></u-image>
				<view class="itemRight">
					<view class="itemTitle">{{ item.title }}</view>
					<view class="studyTime">
						<view class="mustStudy" v-if="item.must">
							必修学时：{{item.mustScore}}/{{item.must}}
						</view>
						<view class="liney" v-if="item.xuan&&item.must"></view>
						<view class="mayStudy" v-if="item.xuan">
							选修学时：{{item.xuanScore}}/{{item.xuan}}
						</view>
					</view>
					<view class="studyDoing">
						<view class="isStudyStart">
							<u-tag :text="item.stateTxt" 
									:type="(item.state===2)?'success':(item.state===1)?'warning':'error'"
									size='mini'/>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
		</view>
	
		<modal-info
			ref="myModalInfoDjy"
			:tag="toast.list[toast.index].tag"
			:mode="toast.list[toast.index].mode"
			:title="toast.list[toast.index].title"
			:content="toast.list[toast.index].content"
			:confirmText="toast.list[toast.index].confirmText"
			:cancelText="toast.list[toast.index].cancelText"
			@confirm="onConfirm"
			@cancel="onCancelCall"
		></modal-info>
	</focus-body>
</template>

<script>
	// 接口请求文件
	import request from '@/pagesB/common/js/request/course.js'; // 课程信息 相关接口
	import project from '@/common/js/public/project.js'; // 项目公共方法
	
	/**
	 * 全部课程页面
	 * @description 全部课程页面
	 */
	export default {
		
		// 页面数据
		data() {
			return {
				courseNum:{},
				// 定时器对象
				timer: {
					downRef: null, // 取消下拉刷新动画
				},
				
				// 课程分类信息
				fenLei: {
					index: 0,
					list: [
						{ value: '未完成', key: 1, xunk: 'fenLeiKey_1' },
						{ value: '已完成', key: 0, xunk: 'fenLeiKey_0' },
					]
				},
				autoStopRef:null,
				// 底部加载更多组件
				loadmore: {
					index: 0,
					list: ['more','loading','noMore'],
				},
				courseList: [],
				courseList1: [],
				courseList2: [],
				toast: {
					index: 0, // 显示信息下标
					list: [
						// 真实照片上传提示框
						{
							tag: "photo",
							mode: "primary",
							title: "信息补充",
							content: "观看视频过程中会识别是否本人观看，为了核对您的身份，我们将会采集您的人脸",
							confirmText: '立即采集',
							cancelText: "取消",
						},
						// 摄像头权限授权提示框
						{
							tag: "facethan",
							mode: "primary",
							title: "学习提醒",
							content: "为了核对您的身份，学习课程的过程中会验证是否为本人观看",
							confirmText: null,
							cancelText: "我知道了",
						}
					],
				},
				type:"all"
			}
		},
		// 页面加载完成
		onLoad() {
			// 全部课程总列表 请求
			this.listInAllReq();
			// 云函数：百度平台鉴权
			// uniCloud.callFunction({
			// 	name: 'token_baidu', // 你的云函数名称
			// 	data: {
			// 		type: 'face', // 人脸识别的鉴权
			// 	},
			// 	success: (res) => {
			// 		// console.log('===== 百度平台 人脸识别鉴权：', res);
			// 		// 将存在的token放入临时缓存
			// 		uni.$focus.varShortTime('set', {
			// 			"baidu_access_token_face": res.result.data.access_token
			// 		});
			// 	}
			// });
		},
		onPullDownRefresh(){
			this.listInAllReq()
		},
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面销毁
		onUnload() {
			// 销毁定时器
			if (this.timer.downRef) { clearTimeout(this.timer.downRef); }
		},
		
		// 页面事件
		methods: {
			// ============================================= 数据处理
			onConfirm(objD) {
				// 只有真实照片上传提示框 才执行
				if (objD.tag == 'photo') {
					// 自定义拍照方法调用
					project.cameraCustom({
						type: 'portrait', // 拍照类型： none-无拍照蒙层  portrait-头像拍照  IDCard-身份证拍照
						size: 'middle', // 生成图片尺寸： low-小尺寸  middle-中等尺寸  high-大尺寸
						album: false, // 是否开启相册选图
						success: (photoD) => {
							// 进行人脸检测
							this.userFaceDetectionReq(photoD.data, ()=>{
								
								// 进行图片上传
								request.imgUpload({
									data: {
										file: photoD.path, // 文件资源地址
									},
									success: (res) => {
										// 修改用户真实照片数据
										this.userInfoEditReq(res.id);
									},
								});
								
							});
						},
					});
				}
			},
			onCancelCall(objD) {
				// 只有摄像头权限授权提示框 才执行
				if (objD.tag == 'facethan')
				{
					// 临时缓存：进行过"人脸对比"提示
					uni.$focus.varShortTime('set', { "tips_modal_faceThan": true });
					// 是否获取到了摄像头权限
					uni.authorize({
						scope: 'scope.camera',
						fail: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pagesB/pages/course/details/index', {
								courseId: this.courseNum.courseId, // 课程id
								jieId: this.courseNum.jieId, // 小节id
							});
						},
						success: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pagesB/pages/course/details/index', {
								courseId: this.courseNum.courseId, // 课程id
								jieId: this.courseNum.jieId, // 小节id
							});
						}
					});
				}
			},
			// 课程item点击
			itemClick(courseId,jieId) {
				this.courseNum={
					courseId,
					jieId
				}
				// 获取临时缓存
				var save_short = uni.$focus.varShortTime('get');
				// 如果已经登录 并且 已经实名 并且 有真实照片
				// save_short && save_short.id && save_short.is_auth==2 && save_short.scene_img_url && save_short.scene_img_url.length>6
				if (save_short && save_short.id )
				{
					// // 如果已经进行过"人脸对比"提示
					// if (save_short.tips_modal_faceThan == true)
					// {
					// 	// 跳转到 视频播放页面
					// 	uni.$focus.pageJump('/pagesB/pages/course/details/index', {
					// 		courseId: this.courseNum.courseId, // 课程id
					// 		jieId: this.courseNum.jieId, // 小节id
					// 	});
					// }
					// // 没有提示过
					// else {
					// 	// 弹出第2类弹框
					// 	this.toast.index = 1;
					// 	// 人脸对比弹框提示
					// 	this.$refs.myModalInfoDjy.open();
					// }
					// 跳转到 视频播放页面
					uni.$focus.pageJump('/pagesB/pages/course/details/index', {
						courseId: this.courseNum.courseId, // 课程id
						jieId: this.courseNum.jieId, // 小节id
					});
				} else {
					// 进行登录要求 回父
					this.$emit('logintouch', { "tag": this.tag });
				}
				// // 进行实名认证
				// else if (save_short.is_auth!=2){
				// uni.showModal({
				// 	confirmColor:"#F0AD4E",
				// 	confirmText:"立即认证",
				// 	cancelText:'暂不认证',
				// 	title: '实名认证',
				// 	content: (save_short.is_auth===4)?"实名认证信息已更新,请进行信息补全,重新认证后可进行安全培训":'您未实名认证，请先实名认证',
				// 	success: (btn_res) => {
				// 		if (btn_res.confirm) {
				// 			uni.navigateTo({
				// 				url: "/pages/realname/index"
				// 			})
				// 		}
				// 	}
				// });
				// 	// 跳转到 实名认证页面
				// 	// uni.$focus.pageJump('/pages/realname/index');
				// }
				// // 如果未上传真实照片
				// else if (!save_short.scene_img_url || save_short.scene_img_url.length<=6)
				// {
				// 	// 弹出第1类弹框
				// 	this.toast.index = 0;
				// 	// 人脸对比弹框提示
				// 	this.$refs.myModalInfoDjy.open();
				// }
			},
			// ============================================= 元素事件
			// 分类栏按钮 点击，参数：indexC-选中项下标
			fenLeiBtnClick(indexC) {
				// 下标不是重复点击 才执行
				if (indexC != this.fenLei.index){
					// 新下标 赋值
					this.fenLei.index = indexC;
					if(indexC){
						this.courseList=this.courseList1
					}else{
						this.courseList=this.courseList2
					}
					// 初始化课程列表
					// this.initData();
					// 全部课程总列表 请求
					// this.listInAllReq();
					this.type="all"
				}
			},
			// ============================================= 接口请求
			// 全部课程总列表
			listInAllReq() {
				// 底部加载效果
				this.loadmore.index = 1;
				// 首页课程列表 接口请求
				request.listInAll({
					fail: () => {
						// 取消下拉刷新动画
						if (this.timer.downRef) { clearTimeout(this.timer.downRef)}
						this.timer.downRef = setTimeout(() => { uni.stopPullDownRefresh(); }, 1000);
					},
					success: (res) => {
						if (this.autoStopRef) {
							clearTimeout(this.autoStopRef);
						}
						// 延时定时器
						this.autoStopRef = setTimeout(() => {
							// 关闭下拉刷新特效
							uni.stopPullDownRefresh();
						}, 1000)
						this.fenLei.list[0].value=`未完成(${res.list2.length})`
						this.fenLei.list[1].value=`已完成(${res.list.length})`
						this.courseList1=[...res.list]//未完成
						this.courseList2=[...res.list2]//已完成
						this.classSon(this.type)
					},
				});
			},
			//课程选修必修分类按钮
			classSon(type){
				this.type = type
				if(type === "choose" && !this.fenLei.index){         //未完成列表  选修
					this.courseList = this.courseList2.filter(item => item.isXuanxiu)
				}else if(type === "must" && !this.fenLei.index){     //未完成列表  必修
					this.courseList = this.courseList2.filter(item => item.isBixiu)
				}else if(type === "all" && !this.fenLei.index){      //未完成列表  全部课程
					this.courseList = [...this.courseList2]
				}else if(type === "choose" && this.fenLei.index){    //已完成列表  选修
					this.courseList = this.courseList1.filter(item => item.isXuanxiu)
				}else if(type === "must" && this.fenLei.index){      //已完成列表  必修
					this.courseList = this.courseList1.filter(item => item.isBixiu)
				}else if(type === "all" && this.fenLei.index){       //已完成列表  全部课程
					this.courseList = [...this.courseList1]
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.line {
		height: 1rpx;
		width: 702rpx;
		background-color: #E5E5E5;
		margin: auto;
	}
	.classSon{
		width: 450rpx;
		display: flex;
		justify-content: space-around;
		margin: 10rpx 0 10rpx 0;
		.classSonItem{
			width: 116rpx;
			height: 50rpx;
			background: #f2f2f2;
			border-radius: 28rpx;
			line-height: 50rpx;
			text-align: center;
			color: #777777;
		}
	}
	.item {
		display: flex;
		width: 749 rpx;
		justify-content: space-evenly;
		
		margin: 30rpx 0 30rpx 0;
	
		.itemRight {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 126rpx;
			.itemTitle {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 450rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				color: #262626;
				line-height: 42rpx;
			}
	
			.studyTime {
				display: flex;
	
				.liney {
					width: 1rpx;
					height: 30rpx;
					background-color: #A6A6A6;
					margin: 0 20rpx 0 20rpx;
				}
	
				.mustStudy {
	
					height: 30rpx;
					font-size: 22rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ff4d4f;
					line-height: 30rpx;
				}
	
				.mayStudy {
					height: 30rpx;
					font-size: 22rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					text-align: left;
					color: #4a87fd;
					line-height: 30rpx;
				}
	
			}
	
		}
	
	}
	
</style>